﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="GMap.ascx.cs" Inherits="Controls_GMap" %>

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAmB4AqnPpTnZKO8aT7_HTtRQhe_Cu257Ef4avq-h53lMG9UAJahQhC1HK9QfBTkiOpeExLk_Q89-MNg"
    type="text/javascript"></script>

<div id="divshowPic" style="position: absolute; display: none; top: 10; left: 10;
    width: 60px; height: 60px;">
    <asp:Image ID="imgShowPic" Height="60" Width="60" runat="server" />
</div>
<div style="position: relative;">
    <div id="PicDiv" style="width: 100%; background-color: #666666; position: absolute;
        z-index: 200; display: none; opacity: 0.9; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
        overflow: visible; height: 100%;">
        <div style="padding: 3px; text-align: center; margin-left: auto; margin-right: auto;
            height: auto; width: 300px; background-color: white; position: relative; top: 50%;
            margin-top: -200px;">
            <div width="100%" style="background-color: #316fac; color: #FFFFFF; border: solid 1px #CCCCCC;
                font-family: Times New Roman; font-size: 15px;">
                Manage Photos:
            </div>
            <br />
            <div>
                <table border="0" width="100%" cellpadding="4" cellspacing="1">
                    <tr>
                        <td>
                            <asp:HiddenField ID="hfMarkerIdx" Value="-1" runat="server" />
                            <asp:Image ID="imgPic" Height="150" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:FileUpload ID="fuPic" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click"
                                CssClass="form_btn" OnClientClick="SaveTrail();" />
                            &nbsp;
                            <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure to delete this Photo?');"
                                OnClick="btnDelete_Click" CssClass="form_btn" />
                            &nbsp;
                            <input type="button" value="Close" onclick="javascript:document.getElementById('PicDiv').style.display='none';"
                                class="form_btn" />
                        </td>
                    </tr>
                </table>
            </div>
            <br />
        </div>
    </div>
    <asp:HiddenField ID="hfID" Value="0" runat="server" />
    <asp:HiddenField ID="hfMarkers" Value="" runat="server" />
    <asp:HiddenField ID="hfLines" Value="" runat="server" />
    <asp:HiddenField ID="hfCenter" Value="50.9307380237,11.6455078125" runat="server" />
    <asp:HiddenField ID="hfZoom" Value="6" runat="server" />
    <asp:HiddenField ID="hfViewMode" Value="0" runat="server" />
    <asp:HiddenField ID="hfKeyWords" Value="" runat="server" />
    <asp:HiddenField ID="hfCategory" Value="" runat="server" />
    <asp:HiddenField ID="hfTrails" Value="" runat="server" />
    <asp:HiddenField ID="hfMainImageID" Value="" runat="server" />
    <asp:HiddenField ID="hfTrailName" Value="" runat="server" />
    <asp:HiddenField ID="hfStart" Value="" runat="server" />
    <asp:HiddenField ID="hfSavepoint" Value="" runat="server" />
    <asp:HiddenField ID="hfCountry" Value="" runat="server" />
    <asp:Panel ID="pnlTop" runat="server" Style="text-align: left;">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <%--<td>Select Trail:</td>--%>
                <td>
                    Click on Map to Set Waypoint:
                </td>
                <td>
                    <%--<asp:Image ID="Image2" ImageUrl="~/images/Marker/HIking.png" onclick="EnableMarker('Hiking');" runat="server" Width="25" Height="40" />
                    <asp:Image ID="Image3" ImageUrl="~/images/Marker/Ice.png" onclick="EnableMarker('Ice');" runat="server"  Width="25" Height="40"/>
                    <asp:Image ID="Image4" ImageUrl="~/images/Marker/Skatting.png" onclick="EnableMarker('Skatting');" runat="server"  Width="25" Height="40"/>
                    <asp:Image ID="Image5" ImageUrl="~/images/Marker/Trekking.png" onclick="EnableMarker('Trekking');" runat="server"  Width="25" Height="40"/>
                    <asp:Image ID="Image6" ImageUrl="~/images/Marker/Walk.png" onclick="EnableMarker('Walk');" runat="server"  Width="25" Height="40"/>
                    <asp:Image ID="Image1" ImageUrl="~/images/Marker/Cycling.png" onclick="EnableMarker('Cycling');" runat="server"  Width="25" Height="40"/>--%>
                    &nbsp;&nbsp;&nbsp;
                    <%--<input type="button" value="End Marking" onclick="Reset();"  class="form_btn"/>--%>
                </td>
            </tr>
            <%--<tr>
                <td>Select Marking</td>
                <td>
                    <asp:Image ID="Image7" ImageUrl="~/images/Marker/Photo.png" onclick="EnableMarker('Photo');" runat="server" Width="25" Height="40" />
                    <asp:Image ID="Image8" ImageUrl="~/images/Marker/Text.png" onclick="EnableMarker('Text');" runat="server"  Width="25" Height="40"/>
                </td>
            </tr>--%>
            <%--<tr>
                <input type="button" value="Start Track" id="btnPolyline" onclick="EnablePolyline(this);"  class="form_btn"/>                
            </tr>--%>
        </table>
    </asp:Panel>
    <div style="text-align: center;">
        <table border="0" cellpadding="0" cellspacing="5" width="100%">
            <tr>
                <td width="70%">
                    <asp:Panel ID="pnlMap" runat="server" Width="800" Height="700">
                    </asp:Panel>
                </td>
                <td valign="top" width="30%">
                    <asp:Panel ID="pnlSide" runat="server">
                        <div style="text-align: left;" class="normal_font">
                            <div id="divMarker">
                                <span style="font-weight: bold;">Way points:</span>
                            </div>
                            <div id="divPolyline" class="normal_font">
                                <span style="font-weight: bold;">Trail:</span>
                            </div>
                        </div>
                    </asp:Panel>
                </td>
            </tr>
        </table>
    </div>

    <script language="javascript" type="text/javascript">   
    function InitGoogleMap()
    {
        var divMarker = document.getElementById('divMarker');
        var divPolyline = document.getElementById('divPolyline');
        var map = document.getElementById('<%=pnlMap.ClientID %>');
        var hfID = document.getElementById('<%=hfID.ClientID %>');
        var hfCenter = document.getElementById('<%=hfCenter.ClientID%>');
        var hfZoom = document.getElementById('<%=hfZoom.ClientID %>');        
        var hfLines = document.getElementById('<%=hfLines.ClientID %>');        
        var hfMarkers = document.getElementById('<%=hfMarkers.ClientID %>');        
        var hfViewMode= document.getElementById('<%=hfViewMode.ClientID %>');
        var hfMainImageID = document.getElementById('<%=hfMainImageID.ClientID %>');
        var hfTrails = document.getElementById('<%=hfTrails.ClientID %>');
        var btnDelete = document.getElementById('<%=btnDelete.ClientID %>');
        var hfCountry = document.getElementById('<%=hfCountry.ClientID %>');
        
        initialize(divMarker, divPolyline, map, hfCenter, hfZoom, hfMarkers, hfLines, hfViewMode, hfMainImageID, hfTrails, btnDelete, hfCountry);

//        if (document.getElementById("ctl00_ContentPlaceHolder1_GMap1_hfStart").value == 'start') {
//            document.getElementById("btnPolyline").value = "End Track";
//        }
//        if (hfID.value != "0")
//        {
            LoadTrail();
//        }
    }





    // Here the map is initialized
    debugger;    
    InitGoogleMap();


    
    </script>

</div>
